<template>
	<view>
		<!-- 顶部导航栏 -->
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">我的资料</block>
		</cu-custom>
		<!-- 消息提示 -->
		<message ref="message"></message>

		<view class="cu-card bg-white margin radius">
			<!-- 头像 -->
			<navigator class="flex justify-center" style="margin: 40rpx 0;" url="/pages/my-info/my-avatar"
				hover-class="none">
				<view class="cu-avatar round" :style="{'background-image':'url('+ avatar +')'}"
					style="height: 220rpx; width: 220rpx;">
				</view>
			</navigator>

			<!-- 文字区 -->
			<view class="text-xl text-black">
				<view class="flex align-center justify-between margin">
					<view>用户名：</view>
					<view class="margin-right">{{ user.username }}</view>
				</view>
				<view class="flex justify-between margin" @tap="showModal" data-target="realName">
					<view>真实姓名：</view>
					<view class="flex align-center">
						<view class="margin-right">{{ user.realName }}</view>
						<view class="cuIcon-right"></view>
					</view>
				</view>
				<navigator class="flex justify-between margin" url="/pages/my-info/my-phone" hover-class="none">
					<view>手机号：</view>
					<view class="flex align-center">
						<view class="margin-right">{{ user.phone }}</view>
						<view class="cuIcon-right"></view>
					</view>
				</navigator>
				<navigator class="flex justify-between margin" url="/pages/my-info/my-email" hover-class="none">
					<view>邮箱：</view>
					<view class="flex align-center">
						<view class="margin-right">{{ user.email }}</view>
						<view class="cuIcon-right"></view>
					</view>
				</navigator>
				<view class="flex justify-between align-center margin">
					<view>
						微信：
						{{ user.openId!=''?'已绑定':'未绑定' }}
					</view>
					<view>
						<button v-if="user.openId!=''" class="cu-btn bg-red" @click="handleUnBandWechat">解绑</button>
						<button v-else class="cu-btn bg-green" @click="handleBandWechat">绑定</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 修改用户名模态框 -->
		<view class="cu-modal bottom-modal" :class="modalName=='realName'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar">
					<view class="action text-blue" @tap="hideModal">取消</view>
					<view class="action text-green" @tap="handleEditRealName">确定</view>
				</view>
				<view class="padding-xl">
					<view class="flex justify-start text-lg margin-bottom">请输入您的真实姓名</view>
					<view class="cu-form-group ">
						<input v-model="realName" name="input"></input>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载弹窗 -->
		<view class="cu-load load-modal" v-if="loadModal">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="@/static/logo.jpg" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	import {
		getInfo,
		updateUserByToken,
		bandWechat,
		unBandWechat
	} from '@/api/user.js'
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				user: {},
				realName: '',
				modalName: null,
				loadModal: true
			}
		},
		onShow() {
			if (!this.$store.getters.token) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			this.getUserInfo()
		},
		computed: {
			...mapGetters(['avatar']),
		},
		methods: {
			getUserInfo() {
				getInfo().then(res => {
					this.user = res.data
					this.loadModal = false
				}).catch(err => {
					this.$refs.message.error({
						title: err.msg,
						duration: 2000
					})
					this.loadModal = false
					if (err.code === 514) {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}
				})
			},
			// 模态窗显示函数
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
				this.realName = this.user.realName
			},
			// 模态窗隐藏函数
			hideModal(e) {
				this.modalName = ''
				this.realName = ''
			},
			// 编辑用户姓名提交函数
			handleEditRealName() {
				if (this.realName == '') {
					this.$refs.message.error({
						title: '真实姓名不能为空',
						duration: 2000
					})
				} else if (this.realName == this.user.realName) {
					this.$refs.message.error({
						title: '真实姓名未修改',
						duration: 2000
					})
				} else {
					this.editRealName()
				}
			},
			// 编辑真实姓名请求函数
			editRealName() {
				updateUserByToken({
					realName: this.realName
				}).then(res => {
					this.hideModal()
					this.$refs.message.success({
						title: res.msg,
						duration: 2000
					})
					this.user.realName = this.realName
				}).catch(err => {
					this.$refs.message.error({
						title: err.msg,
						duration: 2000
					})
				})
			},
			// 点击头像处理事件
			handleAvatar() {

			},
			// 解除绑定微信处理事件
			handleUnBandWechat() {
				unBandWechat().then(res => {
					this.$refs.message.success({
						title: res.msg,
						duration: 2000
					})
					this.getUserInfo()
				}).catch(err => {
					this.$refs.message.error({
						title: err.msg,
						duration: 2000
					})
				})
			},
			// 绑定微信处理事件
			handleBandWechat() {
				const _this = this
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: function(loginRes) {
						bandWechat(loginRes.code).then(res => {
							_this.$refs.message.success({
								title: res.msg,
								duration: 2000
							})
							_this.getUserInfo()
						}).catch(err => {
							_this.$refs.message.error({
								title: err.msg,
								duration: 2000
							})
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		margin: 50rpx 40rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #dfdfdf;
		color: black;

		.user-lable {
			width: 28%;
		}

		.user-info {
			width: 50%;
		}
	}

	.user:last-child {
		border: none;
	}
</style>
